<template>
  <div class="user_main">
    <el-container>
      <el-header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>道路检测数据管理</el-breadcrumb-item>
          <el-breadcrumb-item>道路信息管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-button class="el-button--small" @click="insertBtnFunc()">新增<span class="el-icon-plus"></span></el-button>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="version" label="version" width="180">
          </el-table-column>
          <el-table-column prop="flags" label="flags">
          </el-table-column>
          <el-table-column prop="shapes" label="shapes">
          </el-table-column>
          <el-table-column prop="group_id" label="group_id">
          </el-table-column>
          <el-table-column prop="shape_type" label="shape_type">
          </el-table-column>
          <el-table-column prop="imagePath" label="imagePath">
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center"
          >
            <template #default="props">
              <el-row>
                <el-button
                  size="mini"
                  type="primary"
                  @click="eitBtnFunc(props.row)"
                  icon="el-icon-edit"
                ></el-button>
              </el-row>
              <el-row>
                <el-button
                  size="mini"
                  type="primary"
                  @click="deleteBtnFunc(props.row)"
                  icon="el-icon-delete"
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </el-main>

      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParam.currPage"
          :page-sizes="[2, 5, 10, 20, 50, 100]"
          :page-size="queryParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum"
        ></el-pagination>
      </el-footer>
    </el-container>


    <el-dialog
      :visible.sync="insertDialogVisible"
      width="80%"
      height="60%"
      top="5vh"
      title="新增道路信息"
      :close-on-click-modal="true"
      @close="insertDialogClosed"
      :close-on-press-escape="true"
    >
      <el-form :model="insertInfo" :inline="true" class="demo-form-inline" :label-position="labelPosition"
               ref="insertInfo">
        <el-row>
          <el-col :span="12">
            <el-form-item label="version:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.version">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="label:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.label">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="group_id:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.group_id">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="shape_type:" :label-position="labelPosition"
                          label-width="120px">
              <el-input type="text" v-model="insertInfo.shape_type">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-button size="small" type="primary" style="margin-left:250%"
                       @click="insertInfo()">确认
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>


    <el-dialog
      :visible.sync="dialogVisible"
      width="80%"
      height="60%"
      top="5vh"
      title="编辑道路信息"
      :close-on-click-modal="true"
      @close="updateDialogClosed"
      :close-on-press-escape="true"
    >
      <el-main
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-form :model="updateInfo" :inline="true" class="demo-form-inline" :label-position="labelPosition"
                 ref="updateInfo">
          <el-row>
            <el-col :span="12">
              <el-form-item label="version:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.version">
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="label:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.label">
                </el-input>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="group_id:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.group_id">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="shape_type:" :label-position="labelPosition"
                            label-width="120px">
                <el-input type="text" v-model="updateInfo.shape_type">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import ApiUrl from "@/ApiUrl";

export default {
  data() {
    return {
      tableData: [],
      totalNum: 0,
      updateInfo: {},
      insertInfo: {
        version: '1',
        label: '2',
        group_id: '3',
        shape_type: '4',
        imagePath: '3',
      },
      total: "",
      labelPosition: "left",
      queryParam: {
        currPage: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      insertDialogVisible: false,
    };
  },
  methods: {

    /**
     * 查询病害数据
     **/
    queryRoadList(searchBtn) {
      searchBtn &&
      (this.queryParam.currPage = 1) &&
      (this.queryParam.pageSize = 10);
      const res = axios
        .post(ApiUrl.queryRoadList, this.queryParam)
        .then((val) => {
          let data = val.data;
          this.tableData = data.data;
          this.totalNum = data.count;
          console.info(this.tableData);
        });
    },


    /**
     *
     * 新增病害数据
     * */
    insertRoadInfo() {
      const res = axios
        .post(ApiUrl.insertRoadInfo, this.insertInfo)
        .then((val) => {
          if (val.status === 200) {
            this.queryRoadList();
            this.dialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: "新增失败",
            });
          }
        });
    },

    /**
     *
     * 修改病害数据
     * */
    updateRoadInfo() {
      const res = axios
        .put(ApiUrl.updateRoadInfo, {
          version: "",

        })
        .then((val) => {
          if (val.status === 200) {
            this.queryRoadList();
            this.dialogVisible = false;
          } else {
            this.$message({
              type: "error",
              message: "修改失败",
            });
          }
        });
    },

    /**
     *
     * 修改删除病害数据
     * */
    deleteBtnFunc() {

    },

    /**
     *打开修改弹框
     **/
    eitBtnFunc(item) {
      this.dialogVisible = true;
      this.updateInfo = item;
    },
    /**
     *打开新增弹框
     **/
    insertBtnFunc() {
      this.insertDialogVisible = true;
    },


    /**
     * 修改弹框关闭
     **/
    updateDialogClosed() {
      this.dialogVisible = false;
      this.updateInfo = {}
    },

    /**
     * 新增弹框关闭
     **/
    insertDialogClosed() {
      this.insertDialogVisible = false;
      this.insertInfo = {
        version: '',
        label: '',
        group_id: '',
        shape_type: '',
        imagePath: '',
      }
    },

    /**
     * 每页查询条数变化
     **/
    handleSizeChange(newPageSize) {
      this.queryParam.pageSize = newPageSize;
      this.queryParam.currPage = 1;
      this.queryRoadList();
    },

    /**
     * 监听切换页码
     * @param newCurrentPage
     */
    handleCurrentChange(newCurrentPage) {
      this.queryParam.currPage = newCurrentPage;
      this.queryRoadList();
    },

  },
  created() {
    this.queryRoadList();
  },
};
</script>

<style scoped></style>
